<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


<div class="row full-width" id="searchPanelDiv">
	<div class="columns">
		<!-- <div class="columns"> -->
		<form data-abide="ajax" name="form-abide" id="form-abide" method="POST">
			<!-- error div -->
			<c:if test="${not empty message}">
				<div class="row">
					<div class="large-12 large-centered columns margin-15px-top">
						<div data-alert class="alert-box alert radius">
							<b>${message}</b> <a href="#" class="close">&times;</a>
						</div>
					</div>
				</div>
			</c:if>
			<div class="row">
				<div class="large-12 medium-14 large-centered medium-centered columns margin-15px-top">
					<form:errors path="*" element="div"
						cssClass="alert-box alert radius" id="alert" />
				</div>
			</div>
			<div
				class="large-12 medium-14 small-16 large-centered medium-centered small-centered columns bg-light-blue">
				<!--content-->
				<!-- <div class="large-12 large-centered medium-14 medium-centered small-16 columns bg-light-blue"> -->
				<!-- row 1  -->
				<div class="row">
					<div class="large-8 medium-12 columns">
						<div class="large-8 medium-8 columns" data-equalizer-watch>
							<input id="RoundTripRadio" type="radio" name="typeOfTrip" class="radioBtn"
								value="roundTrip" ${params.typeOfTrip!='oneWay'?'checked':''}
								required> <label for="typeOfTrip" class="error">
								<h6 id="roundtrip" class="blue" onclick="selectTypeOfTrip(this)">
									<b>ROUND-TRIP</b>
								</h6>
							</label>
						</div>
						<div class="large-8 medium-8 columns">
							<input id="OneWayRadio" type="radio" name="typeOfTrip" class="radioBtn"
								value="oneWay" ${params.typeOfTrip=='oneWay'?'checked':''}
								required> <label for="typeOfTrip" class="error">
								<h6 id="oneway" class="blue" onclick="selectTypeOfTrip(this)">
									<b>ONE-WAY</b>
								</h6>
							</label>
						</div>
					</div>
				</div>

				<!-- row 2.1  -->
				<div class="row">
					<div class="large-16 columns">
						<div class="large-7 columns margin-14px-bot">
							<div class="row collapse">
								<div class="columns label-prefix">
									<label class="prefix">From</label>
								</div>
								<div class="columns input-after-prefix">
									<input type="text" class="border-blue" required id="fromInput"
										name="fromLocation"> <small class="error">Field
										is required.</small>
								</div>
							</div>
						</div>

						<!-- <div class="show-for-large-up"> -->
						<div class="large-2 medium-16 small-16 columns margin-14px-bot">
							<div align="center">
								<a id="switch_location"> <img
									src="<c:url value="/resources/img/ic_switch_location.png"/>">
								</a>
							</div>
						</div>
						<!-- </div> -->


						<div class="large-7 columns margin-14px-bot">
							<div class="row collapse">
								<div class="columns label-prefix">
									<label class="prefix">To</label>
								</div>
								<div class="columns input-after-prefix">
									<input type="text" class="border-blue" required id="toInput"
										name="toLocation"> <small class="error">Field
										is required.</small>
								</div>
							</div>
						</div>
					</div>

				</div>
				<!-- row 2.2  -->


				<!-- row 3  -->
				<div class="row collapse">

					<div class="large-7 columns">

						<div class="large-8 medium-8 columns margin-14px-bot">
							<div class="row date collapse">
								<div class="columns label-prefix">
									<label class="prefix">Depart</label>
								</div>
								<div class="columns input-after-prefix">
									<input id="dpd1" class="border-blue" type="text"
										value="${params.outBound}" name="outBound"
										data-date-format="yyyy/mm/dd" readonly required> <small
										class="error">Field is required.</small>
								</div>
							</div>
						</div>

						<div class="large-8 medium-8 columns margin-14px-bot" id="lbReturn">
							<div class="row date collapse">
								<div class="columns label-prefix">
									<label class="prefix">Return</label>
								</div>
								<div class="columns input-after-prefix"
									id="returnField">
									<input id="dpd2" class="border-blue" type="text" name="inBound"
										value="${params.inBound }" data-date-format="yyyy/mm/dd"
										readonly required> <small class="error">Field is
										required.</small>
								</div>
							</div>
						</div>

					</div>

					<!-- <div class="show-for-large-up"> -->
					<div class="large-2 columns"></div>
					<!-- </div> -->

					<div class="large-7 medium-16 columns">

						<div class="small-16 one-third columns">
							<div class="row collapse">
								<div class="columns label-prefix">
									<span title="12+ Years"> <label
										class="prefix"> Adult </label>
									</span>
								</div>
								<div class="columns input-after-prefix">
									<select name="numAdult" class="border-blue" id="numAdult">
										<option value="1" ${params.numAdult == '1' ? 'selected':''}>1</option>
										<option value="2" ${params.numAdult == '2' ? 'selected':''}>2</option>
										<option value="3" ${params.numAdult == '3' ? 'selected':''}>3</option>
										<option value="4" ${params.numAdult == '4' ? 'selected':''}>4</option>
										<option value="5" ${params.numAdult == '5' ? 'selected':''}>5</option>
										<option value="6" ${params.numAdult == '6' ? 'selected':''}>6</option>
										<option value="7" ${params.numAdult == '7' ? 'selected':''}>7</option>
										<option value="8" ${params.numAdult == '8' ? 'selected':''}>8</option>
										<option value="9" ${params.numAdult == '9' ? 'selected':''}>9</option>
									</select>

								</div>

							</div>
						</div>

						<div class="small-16 one-third columns">
							<div class="row collapse">
								<div class="columns label-prefix">
									<span title="Under 12"> <label
										class="prefix">Child</label>
									</span>
								</div>
								<div class="columns input-after-prefix">
									<select name="numChild" class="border-blue" id="numChild">
										<option value="0" ${params.numChild == '0' ? 'selected':''}>0</option>
										<option value="1" ${params.numChild == '1' ? 'selected':''}>1</option>
										<option value="2" ${params.numChild == '2' ? 'selected':''}>2</option>
										<option value="3" ${params.numChild == '3' ? 'selected':''}>3</option>
										<option value="4" ${params.numChild == '4' ? 'selected':''}>4</option>
										<option value="5" ${params.numChild == '5' ? 'selected':''}>5</option>
										<option value="6" ${params.numChild == '6' ? 'selected':''}>6</option>
									</select>
								</div>

							</div>
						</div>

						<div class="small-16 one-third columns">
							<div class="row collapse">
								<div class="columns label-prefix">
									<span title="Under 2"> <label
										class="prefix">Infant</label>
									</span>
								</div>
								<div class="columns input-after-prefix">
									<select name="numInfant" class="border-blue" id="numInfant">
										<option value="0" ${params.numInfant == '0' ? 'selected':''}>0</option>
										<option value="1" ${params.numInfant == '1' ? 'selected':''}>1</option>
										<option value="2" ${params.numInfant == '2' ? 'selected':''}>2</option>
										<option value="3" ${params.numInfant == '3' ? 'selected':''}>3</option>
										<option value="4" ${params.numInfant == '4' ? 'selected':''}>4</option>
										<option value="5" ${params.numInfant == '5' ? 'selected':''}>5</option>
										<option value="6" ${params.numInfant == '6' ? 'selected':''}>6</option>
									</select>
								</div>

							</div>
						</div>
					</div>

				</div>

				<!-- row 4  -->
				<div class="row collapse">
					<div class="large-7 medium-16 columns">
						<div class="large-8 medium-8 columns">
							<div class="row collapse">
								<div class="columns label-prefix">
									<label class="prefix">Class</label>
								</div>
								<div class="columns input-after-prefix">
									<select name="cabinClass" class="border-blue" id="cabinClass">
										<option value="0" ${params.cabinClass == '0' ? 'selected':''}>Economy</option>
										<option value="1" ${params.cabinClass == '1' ? 'selected':''}>Business</option>
										<option value="2" ${params.cabinClass == '2' ? 'selected':''}>All</option>
									</select>
								</div>
							</div>
						</div>
						<div class="large-8 medium-8 columns">
							<div class="row collapse">
								<div class="columns label-prefix">
									<label class="prefix">Stop(s)</label>
								</div>
								<div class="columns input-after-prefix">
									<select name="numStop" class="border-blue" id="numStop">
										<option value="2" ${params.numStop == 2 ? 'selected':''}>Any</option>
										<option value="0" ${params.numStop == 0 ? 'selected':''}>0</option>
										<option value="1" ${params.numStop == 1 ? 'selected':''}>1</option>
									</select>
								</div>
							</div>
						</div>
					</div>

					<!-- <div class="show-for-large-up"> -->
					<div class="large-2 medium-2 columns"></div>
					<!-- </div> -->

					<div class="large-7 columns margin-14px-bot">
						<div class="large-16 medium-16 columns">
							<div class="row collapse">
								<div class="columns label-prefix">
									<label class="prefix">Airlines</label>
								</div>
								<div class="columns search-airline">
									<input id="input_autocomplete_airline" type="text"
										name="airlines" class="border-blue" />
								</div>
								<div id="possitiveAndNegativeAirline" class="columns search-thumb" title="Positive Airline(s)">
									<label id="btn_airlines_filter_mode" class="font-awesome-center postfix fa fa-thumbs-o-up"></label>
									<input type="hidden" id="airlinesFilterMode" name="airlinesFilterMode" value="${params.airlinesFilterMode}">
								</div>
							</div>
						</div>
					</div>

				</div>

				<!-- row 5  -->
				<div class="row">
				<input type="hidden" id="functionType"  name="functionType">
					<div class="columns" id="request_area" >
						<div class="large-7 columns right" >
							<button id="BtnSearch" name="BtnSearch" type="submit" onclick="searchWithAjax()"
								class="small search button expand right">
								<img src="<c:url value="/resources/img/ic_search.png"/>"
									class="margin-5px-right">search
							</button>
						</div>
					</div>
				</div>

				<!-- </div> -->

				<!-- end content -->

			</div>
		</form>
	</div>
<!-- 	the below text field is used for store result of creating task -->
	<input type="hidden" id="createTaskResult" value="${quickTaskResult}">
</div>

<div class="row" id="rowSearchPanelLoading">
	<div id="searchPanelLoading" class="search-panel-loading-modal"></div>
</div>